<template>
  <view class="">
     
      
    <view class="flex-col section_1">
      <view class="flex-col section_2">
         <u-sticky>
             <view class="justify-center group">
               <image
                 src="https://codefun-proj-user-res-1256085488.cos.ap-guangzhou.myqcloud.com/62ac1d455a7e3f03100b6468/62b188edd029820011534ee0/16558118100137651714.png"
                 class="image"
                 @click="onClickImage_1"
               />
               <text class="text">订单详情</text>
             </view>
       </u-sticky>
       <view class="" style="position: relative;">
           <view class="flex-col items-start group_1">
             <text class="text_2" v-show="list_YhKWZRNv.orderStatus==0">您的订单尚未支付，请您尽快...</text>
             <text class="text_2" v-show="list_YhKWZRNv.orderStatus==1">待咨询</text>
             <text class="text_1" v-show="list_YhKWZRNv.orderStatus==2">待评价</text>
             <text class="text_2" v-show="list_YhKWZRNv.orderStatus==3">您的订单已完成</text>
			 <text class="text_2" v-show="list_YhKWZRNv.orderStatus==4">您的订单已取消</text>
           </view>
           <view class="imgs" style="position: absolute;bottom:-80rpx;right: 50rpx;" >
               <image src="../../static/oder/order1.png" style="width: 210rpx;height: 180rpx;"></image>
           </view>
       </view>
        
      </view>
    </view>
    <view class="flex-col group_2">
      <view class="flex-col section_3">
        <view class="flex-row group_3"  v-if="!list_YhKWZRNv.test">
          <view class="flex-col items-center group_4">
            <image
              :src="list_YhKWZRNv.wxAvatar?list_YhKWZRNv.wxAvatar:'https://codefun-proj-user-res-1256085488.cos.ap-guangzhou.myqcloud.com/62ac1d455a7e3f03100b6468/62b188edd029820011534ee0/16558114145792943216.png'"
              class="image_1"
            />
            <view class="flex-col items-center text-wrapper"><text class="text_3">在线</text></view>
            <!-- <view class="flex-col items-center text-wrapper22"  v-show="!list_YhKWZRNv.online"><text class="text_33">离线</text></view> -->
          </view>
          <view class="flex-col group_5">
            <view class="flex-row">
              <text class="text_4">{{list_YhKWZRNv.adviserName}}</text>
              <view class="flex-col text-wrapper_1" v-show="list_YhKWZRNv.adviserLevelInfo!=null"><text class="text_5">{{list_YhKWZRNv.adviserLevelInfo}}</text></view>
            </view>
            <scroll-view scroll-x="true" style="width: 400rpx;margin-top: 0.47rem;">
                <view class="flex-row group_7">
                  <view class="" v-for="(item,index) in list_YhKWZRNv.goodWays" :key="index">
                      {{item.title}}
                  </view>
                </view>
            </scroll-view>
            
          </view>
        </view>
        <view class=""  v-if="!list_YhKWZRNv.test">
            <view class="justify-between section_4"  v-if="list_YhKWZRNv.serviceTypeName!='文字咨询'">
              <view class="flex-row group_8">
                <image
                  src="https://project-user-resource-1256085488.cos.ap-guangzhou.myqcloud.com/62ac1d455a7e3f03100b6468/62b188edd029820011534ee0/16558118111936603149.png"
                  class="image_2"
                />
                <text class="text_8">电话咨询</text>
              </view>
              <view class="flex-col items-center text-wrapper_22" @click="phones" v-if="list_YhKWZRNv.orderStatus == 1"><text class="text_9">点击呼叫</text></view>
             <view class="flex-col items-center text-wrapper_2"  v-else><text class="text_9">点击呼叫</text></view>
            </view>
            
            <view class="justify-between section_4"  v-if="list_YhKWZRNv.serviceTypeName=='文字咨询'">
              <view class="flex-row group_8">
                <image
                  src="https://project-user-resource-1256085488.cos.ap-guangzhou.myqcloud.com/62ac1d455a7e3f03100b6468/62b188edd029820011534ee0/16558118111936603149.png"
                  class="image_2"
                />
                <text class="text_8">文字咨询</text>
              </view>
              <view class="flex-col items-center text-wrapper_22" @click="tuwen(list_YhKWZRNv)" v-if="list_YhKWZRNv.orderStatus == 1"><text class="text_9">点击进入咨询室</text></view>
             <view class="flex-col items-center text-wrapper_2"  v-else><text class="text_9">点击进入咨询室</text></view>
            </view>
            
            <view class="justify-between section_4"  v-if="list_YhKWZRNv.serviceTypeName=='包月咨询'">
              <view class="flex-row group_8">
                <image
                  src="https://project-user-resource-1256085488.cos.ap-guangzhou.myqcloud.com/62ac1d455a7e3f03100b6468/62b188edd029820011534ee0/16558118111936603149.png"
                  class="image_2"
                />
                <text class="text_8">包月咨询</text>
              </view>
               <view class="flex-col items-center text-wrapper_22" @click="yuyue" v-if="list_YhKWZRNv.status==1"><text class="text_9">点击预约电话咨询</text></view>
               <view class="flex-col items-center text-wrapper_2"  v-else><text class="text_9">点击预约电话咨询</text></view>
              <view class="flex-col items-center text-wrapper_22" @click="tuwen" v-if="list_YhKWZRNv.status==1"><text class="text_9">点击进入咨询室</text></view>
              <view class="flex-col items-center text-wrapper_2"  v-else><text class="text_9">点击进入咨询室</text></view>
            </view>
        </view>
       
        <view class="texts" v-if="list_YhKWZRNv.test" >
            <view class="left">
                测评
            </view>
            <view class="right">
                专业抑郁测（这里显示测评标题）
            </view>
        </view>

       
        <view class="justify-between group_9">
          <view class="flex-row group_10">
            <text class="text_10">付款额：</text>
            <text class="text_11">￥</text>
            <text class="text_12">{{list_YhKWZRNv.actualPrice}}</text>
          </view>
          <view class="flex-col items-center text-wrapper_3" v-if="list_YhKWZRNv.status==0" @click="quxiaoding"><text class="text_13">取消订单</text></view>
        </view>
      </view>
      <view class="flex-col group_11">
        <view class="flex-col section_5">
          <view class="justify-between">
            <text class="text_14">订单编号：</text>
            <view class="flex-row group_13">
              <text class="text_15">{{list_YhKWZRNv.id}}</text>
              <view class="flex-col items-center text-wrapper_4"><text class="text_16" @click="myCopy(list_YhKWZRNv.id)">复制</text></view>
            </view>
          </view>
          <view class="justify-between group_14" v-show="list_YhKWZRNv.createTime">
            <text class="text_17">下单时间：</text>
            <text class="text_18">{{list_YhKWZRNv.createTime}}</text>
          </view>
          <view class="justify-between group_15">
            <text class="text_19">支付状态：</text>
            <text class="text_20" v-if="list_YhKWZRNv.payType==0">未支付</text>
            <text class="text_20" v-else>已支付</text>
          </view>
          <view class="justify-between group_16">
            <text class="text_21">支付方式：</text>
            <text class="text_22" >微信支付</text>
          </view>
          <view class="justify-between group_17">
            <text class="text_23">订单状态：</text>
			<text class="text_24" v-show="list_YhKWZRNv.orderStatus==0">您的订单尚未支付，请您尽快...</text>
			<text class="text_24" v-show="list_YhKWZRNv.orderStatus==1">待咨询</text>
			<text class="text_24" v-show="list_YhKWZRNv.orderStatus==2">待评价</text>
			<text class="text_24" v-show="list_YhKWZRNv.orderStatus==3">您的订单已完成</text>
			<text class="text_24" v-show="list_YhKWZRNv.orderStatus==4">您的订单已取消</text>
          </view>
        </view>
      </view>
    </view>
    <view class="flex-col section_6">
      <view class="justify-between group_18">
        <text class="text_26">订单总价</text>
        <text class="text_27">￥{{list_YhKWZRNv.actualPrice}}</text>
      </view>
      <view class="justify-end group_19">
        <text class="text_28">实付款：</text>
        <text class="text_29">￥{{list_YhKWZRNv.actualPrice}}</text>
      </view>
    </view>

    <view class="justify-between section_7">
        <view class="flex-row section_77" v-if="list_YhKWZRNv.status==0">
          <text class="text_300">￥{{list_YhKWZRNv.actualPrice}}</text>
          <!-- <text class="text_310">原价￥199</text>
          <view class="flex-col items-center text-wrapper_555"><text class="text_323">积分抵1元</text></view> -->
        </view>
      <button class="flex-row group_20 service" v-if="list_YhKWZRNv.status!=0" open-type="contact">
               <image
                 src="https://codefun-proj-user-res-1256085488.cos.ap-guangzhou.myqcloud.com/62ac1d455a7e3f03100b6468/62b188edd029820011534ee0/16558119960433222034.png"
                 class="image_3"
               />
               <text class="text_30">联系客服</text>
         </button>
      <view class="flex-col items-center text-wrapper_55" v-if="list_YhKWZRNv.status==0"  @click="payment()">
        <text class="text_31">立即支付</text>
      </view>
      <view class="flex-col items-center text-wrapper_55" v-if="list_YhKWZRNv.status==1&&!list_YhKWZRNv.test" @click="phone">
        <text class="text_31">立即咨询</text>
      </view>
      <view class="flex-col items-center text-wrapper_55" v-if="list_YhKWZRNv.status==1&&list_YhKWZRNv.test" @click="ceping">
        <text class="text_31">立即测评</text>
      </view>
      <view class="flex-col items-center text-wrapper_55" v-if="list_YhKWZRNv.status==2" @click="onClickView_11s(3)">
        <text class="text_31">去评论</text>
      </view>
      <view class="flex-col items-center text-wrapper_55" v-if="list_YhKWZRNv.status==3" @click="onClickView_11s(4)">
        <text class="text_31">已完成</text>
      </view>
    </view>
    <!-- <u-popup :show="showpop" round="10">
      <fuwupingjia :fuwupingjiaShowVisible.sync="showpop"  :expertsId="list_YhKWZRNv.expertsId" @evaluate="test"></fuwupingjia>
    </u-popup> -->

  </view>
</template>

<script>
    import {userOrderInfo} from '../../api/index.js'
    // import fuwupingjia from '../huaban_1_kaobei_55/huaban_1_kaobei_55'
  export default {
    components: {
        // fuwupingjia
    },
    data() {
      return {
          expertsId:'',
          showpop:false,
          list_YhKWZRNv:{
                test:false,
                createTime:'2022-05-19 15：47：01 ',
                status:1, //订单状态
                avatars:'https://codefun-proj-user-res-1256085488.cos.ap-guangzhou.myqcloud.com/62ac1d455a7e3f03100b6468/62b188edd029820011534ee0/16558114145792943216.png',
                realName:'贾晓兰',
                level:'高级餐饮咨询师',
                label:[
                    '恋爱婚姻',
                    '家庭关系',
                    '个人成长'
                ],
                online:true, //在线状态
                payPrice:99.9,
                payType:'微信支付',
               orderId:'321341654564',
                consultingWay:"电话咨询"   //0 电话咨询 1文字咨询
            },
            orderNo:'',
      };
    },
    onLoad(a) {
        console.log(a.id);
        let that=this
        that.orderNo=a.id
		let data = {
			orderNo:a.id
		}
		userOrderInfo(data).then(res=>{
			this.list_YhKWZRNv = res.data
			console.log(res)
		})
    
    },
    methods: {
        ceping(){
            uni.navigateTo({
                url:'/pages/userSide/quiz'
            })
        },
        yuyue(){
            uni.navigateTo({
                url:'/pages/userSide/particulars?expertsId='+this.list_YhKWZRNv.expertsId
            })
        },
        tuwen(orderNo){
            uni.navigateTo({
                 url:'/pages/myorder/imageText?id=' + orderNo.adviserId +"&orderid=" + orderNo.id
            })
        },
        phones(){
            uni.navigateTo({
                url:'/pages/myorder/phone?expertsId=13041430152'
            }) 
        },
        
        test(e){
            console.log(e);
              let data = {
                orderId: this.orderNo,
                expertsId:this.list_YhKWZRNv.expertsId,
                status: 5
              }
              getModifyTheState(data).then(res => {
                 uni.showToast({
                   title: '评价完成',
                   icon: 'none'
                 })
                 setTimeout(() => {
                       uni.navigateBack({
                           delta:1
                       })
                    }, 2000);
              })
        },
      myCopy(value){
           //提示模板
           uni.setClipboardData({
             data:value,//要被复制的内容
             success:()=>{//复制成功的回调函数
               uni.showToast({//提示
                 title:"复制成功",
                 icon:'none'
               })
             }
           })
        },
        quxiaoding(){
            let data={
               orderId:this.orderNo
            }
            getocancel(data).then(res=>{
                console.log("取消订单",res);
                uni.navigateBack({
                    delta:1
                })
            })

        },
       payment(){
           uni.showLoading({
           	title: '订单支付中'
           });
           this.getOrderPay(this.orderNo,'支付成功');
       },
        phone(){
            console.log("1111");
            if(this.list_YhKWZRNv.consultingWay=='电话咨询'){
                console.log("22222");
               uni.navigateTo({
                   url:'/pages/myorder/phone?expertsId='+this.list_YhKWZRNv.expertsId
               }) 
            }else{
                console.log("3333");
                uni.navigateTo({
                    url:'/pages/myorder/imageText?expertsId='+this.list_YhKWZRNv.expertsId
                }) 
            }
            
               
        },
        getOrderPay: function(orderNo, message) {
        	console.log(orderNo)
        	let that = this;
        	// let goPages = '/pages/order_pay_status/index?order_id=' + orderNo + '&msg=' + message; //前往订单页面的路径
        	uni.request({
        		url: this.$store.state.http.http + 'pay/payment',
        		method: 'POST',
        		data: {
        			orderNo: orderNo,
        			payChannel: 'routine',
        			payType: 'weixin',
        			scene: that.productType === 'normal' ? 0 : 1177 //下单时小程序的场景值
        		},
        		header: {
        			'Content-Type': 'application/json', //自定义请求头信息
        			'Authorization': this.$store.state.app.token
        		},
        		success: (res) => {
        			//这个返回的参数后台是固定的
        			let jsConfig = res.data.data.jsConfig;
        			console.log("12", res.data.data.payType)
        			//判断类型 如果是微信支付进入微信支付界面
        			switch (res.data.data.payType) {
        				case 'weixin':
        					// #ifdef MP
        					//调起微信支付
        					uni.requestPayment({
        						timeStamp: jsConfig.timeStamp,
        						nonceStr: jsConfig.nonceStr,
        						package: jsConfig.packages,
        						signType: jsConfig.signType,
        						paySign: jsConfig.paySign,
        						ticket: that.productType === 'normal' ? null : jsConfig.ticket,
        						success: function(ress) {
        							console.log(ress)
        							uni.hideLoading(); //隐藏loding

        							uni.request({
        								url: that.$store.state.http.http +
        									'pay/queryPayResult',
        								method: 'get',
        								data: {
        									orderNo: orderNo
        								},
        								header: {
        									'Content-Type': 'application/json', //自定义请求头信息
        									'Authorization': that.$store.state.app.token
        								},
        								success: (response) => {
        									//后台接口
        									uni.hideLoading(); //隐藏loding
        									uni.showToast({
        										title: '缴费成功'
        									})
                                            console.log("11111112231321321321321",typeof orderNo );

                                            // let datas={
                                            //     orderId:that.orderNo,
                                            //     status:1
                                            // }
                                            // getModifyTheState(datas).then(res=>{
                                            //     console.log(res);
                                            // })
        									setTimeout(() => {
        										// uni.redirectTo({
        										// 	// url: '/pages/huaban_1_kaobei_43/huaban_1_kaobei_43?orderId=' +orderNo //跳转订单页面
                  //                                 url: '/pages/pingjia/pingjia?id=' +orderNo
        										// })
                                                uni.navigateBack({
                                                    delta:1
                                                })
        									}, 2000);
        								},
        								fail: (res) => {
        									console.log(res)
        									uni.hideLoading();
        									// return that.$util.Tips({
        									// 	title: err
        									// });
                                           uni.showToast({
                                           	title: '缴费失败',
                                             icon:'none'
                                           })

        								}
        							});
        						},
        						fail: function(e) {
        							uni.hideLoading();
        							// return that.$util.Tips({
        							// 	title: '取消支付'
        							// }, {
        							// 	tab: 5,
        							// 	url: '/pages/goods_cate/goods_cate'
        							// });
                                    uni.showToast({
                                    	title: '缴费失败',
                                         icon:'none'
                                    })

                                  console.log("2222");
        						},
        						// complete: function(e) {
        						// 	uni.hideLoading();
        						// 	关闭当前页面跳转至订单状态
        						// 	if (e.errMsg == 'requestPayment:cancel') return that
        						// 		.$util
        						// 		.Tips({
        						// 			title: '取消支付'
        						// 		}, {
        						// 			tab: 5,
        						// 			url: '/pages/goods_cate/goods_cate'
        						// 		});
        						// },
        					})
        					// #endif
        					// #ifdef H5
        					let data = {
        						timestamp: jsConfig.timeStamp,
        						nonceStr: jsConfig.nonceStr,
        						package: jsConfig.packages,
        						signType: jsConfig.signType,
        						paySign: jsConfig.paySign
        					};
        					that.$wechat.pay(data).then(res => {
        						if (res.errMsg == 'chooseWXPay:cancel') {
        							uni.hideLoading();
        							// return that.$util.Tips({
        							// 	title: '取消支付'
        							// }, {
        							// 	tab: 5,
        							// 	url: '/pages/goods_cate/goods_cate'
        							// });
        						} else {
        							wechatQueryPayResult(orderNo).then(res => {
        								uni.hideLoading();
        								// return that.$util.Tips({
        								// 	title: '支付成功',
        								// 	icon: 'success'
        								// }, {
        								// 	tab: 5,
        								// 	url: goPages
        								// });
        							}).cache(err => {
        								uni.hideLoading();
        								// return that.$util.Tips({
        								// 	title: err
        								// });
        							})
        						}
        					}).cache(res => {
        						uni.hideLoading();
        						// return that.$util.Tips({
        						// 	title: '取消支付'
        						// }, {
        						// 	tab: 5,
        						// 	url: '/pages/goods_cate/goods_cate'
        						// });
        					});
        					// #endif
        					break;
        				// case 'yue':
        				// 	uni.hideLoading();
        				// 	return that.$util.Tips({
        				// 		title: message
        				// 	}, {
        				// 		tab: 5,
        				// 		url: goPages + '&status=1'
        				// 	});
        				// 	break;
        				// case 'weixinh5':
        				// 	uni.hideLoading();
        				// 	that.$util.Tips({
        				// 		title: '订单创建成功'
        				// 	}, {
        				// 		tab: 5,
        				// 		url: goPages + '&status=0'
        				// 	});
        				// 	setTimeout(() => {
        				// 		location.href = jsConfig.mwebUrl + '&redirect_url=' + window
        				// 			.location
        				// 			.protocol + '//' + window.location.host +
        				// 			goPages + '&status=1';
        				// 	}, 100)
        				// 	break;
        			}

        		},
        		fail: (res) => {
        			uni.hideLoading();
                    let datas={
                        "orderId":orderNo,
                        "status":0
                    }
                    getModifyTheState(datas).then(res=>{
                        console.log(res);
                    })
        			uni.showToast({
        			    title: '支付失败',
        			    icon:'none',
        			    duration: 2000
        			});
        		}
        	});
        },

      onClickImage_1() {
        uni.navigateBack({
            delta:1
        });
      },
      onClickViewv(){
            this.showpop=true
      },
       onClickView_11s(a) {
             let data = {
               orderId:  that.orderNo,
               expertsId: this.list_YhKWZRNv.expertsId,
               status: a
             }
             getModifyTheState(data).then(res => {
                uni.showToast({
                  title: '确认成功！',
                  icon: 'none'
                })
               this.fromlist()
             
             }).catch(err => {
               uni.showToast({
                 title: err,
                 icon: 'none'
               })
             })
        },
    },
  };
</script>

<style scoped lang="scss">
    .service{
        background-color: #fff;
    }
    .service::after{
        border: none;
    }
  .page {
    background-color: #f5f5f5;
    width: 100%;
    overflow-y: auto;
    overflow-x: hidden;
    height: 100%;
  }
  .text-wrapper_555 {
    padding: 0.41rem 0 0.38rem;
    flex-shrink: 0;
    align-self: center;
    background-color: #fea14a;
    box-shadow: 0px 0.094rem 0.16rem #e4452d2e;
    background-image: linear-gradient(0deg, #e65943 0%, #f4715d 100%, #f4715d 100%);
    border-radius: 0.72rem 0.72rem 0.72rem 0px;
    width: 4.59rem;
    height: 1.44rem;
    position: relative;
  }
  .text-wrapper_66 {
    margin-left: 0.5rem;
    padding: 1.09rem 0 1.03rem;
    flex-shrink: 0;
    background-color: #6d79fe;
    width: 10.44rem;
    height: 3.06rem;
  }
  .section_1 {
    background-color: #ffffff;
    height: 8.94rem;
  }
  .group_2 {
    padding: 0.97rem 0.53rem 0 0.94rem;
  }
  .section_6 {
    margin: 0 0.94rem;
    background-color: #ffffff;
    border-radius: 0.31rem;
  }
  .text_300 {
    align-self: center;
    color: #e65943;
    font-size: 1rem;
    font-family: SourceHanSansCN;
    font-weight: 500;
    line-height: 0.81rem;
  }
  .text_310 {
    align-self: center;
    color: #999999;
    font-size: 0.75rem;
    font-family: SourceHanSansCN;
    line-height: 0.72rem;
    text-decoration: line-through;
  }
  .section_7 {
    background-color: #ffffff;
    width: 100vw;
    position: fixed;
    padding-bottom: 30rpx;
    bottom: 0;
    left: 0;
  }
  .section_2 {
    margin-top: -0.66rem;
    padding: 2.72rem 0.94rem 1.69rem;
    position: relative;
    background:linear-gradient(to right, #6CBEFF, #6CBEFF, #1989E1);
    overflow: hidden;
  }
  .section_3 {
    margin-right: 0.41rem;
    padding: 0 0.91rem;
    background-color: #ffffff;
    border-radius: 0.47rem;
  }
  .group_11 {
    padding: 0.91rem 0 0.94rem;
    position: relative;
  }
  .group_18 {
    padding: 0.97rem 0.63rem 0.94rem 0.94rem;
    border-bottom: solid 0.031rem #e5e5e5;
  }
  .group_19 {
    padding: 1.16rem 0.66rem;
  }
  .section_77 {
    padding: 0 10rpx;
    background-color: #ffffff;
  }
  .group_20 {
    width: 11.63rem;
    display: flex;
    justify-content: center;
    align-self: center;
  }
  .text_323 {
    color: #ffffff;
    font-size: 0.69rem;
    font-family: SourceHanSansCN;
    line-height: 0.66rem;
  }
  .text_333 {
    color: #ffffff;
    font-size: 1rem;
    font-family: SourceHanSansCN;
    font-weight: 500;
    line-height: 0.94rem;
  }
  .text-wrapper_5 {
    padding: 1.09rem 0 1.03rem;
    background-color: #fea14a;
    width: 11.63rem;
    height: 3.06rem;
  }
  .text-wrapper_55 {
    padding: 1.09rem 0 1.03rem;
    background-color: #2691E6;
    width: 11.63rem;
    height: 3.06rem;
  }
  .group {
    padding-bottom: 0.19rem;
    position: relative;
  }
  .group_1 {
    margin-top: 1.34rem;
    padding: 0 1.19rem;
  }
  .group_3 {
    padding: 0.97rem 0.66rem 0.94rem;
  }
  .section_4 {
    margin-left: 0.094rem;
    margin-right: 0.13rem;
    padding: 0.59rem 0.72rem 0.59rem 0.94rem;
    background-color:#D2E8F9;
    border-radius: 0.47rem;
  }
  .group_9 {
    margin-top: 0.91rem;
    padding: 0.91rem 0 0.81rem;
    border-top: solid 0.031rem #e5e5e5;
  }
  .section_5 {
    margin-right: 0.41rem;
    padding: 0.81rem 0.84rem 1rem 0.94rem;
    background-color: #ffffff;
    border-radius: 0.31rem;
  }
  .text_25 {
    color: #999999;
    font-size: 0.81rem;
    font-family: SourceHanSansCN;
    line-height: 0.63rem;
    position: absolute;
    right: 0;
    top: 3.78rem;
  }
  .text_26 {
    color: #333333;
    font-size: 0.88rem;
    font-family: SourceHanSansCN;
    line-height: 0.81rem;
  }
  .text_27 {
    margin-bottom: 0.16rem;
    color: #999999;
    font-size: 0.81rem;
    font-family: SourceHanSansCN;
    line-height: 0.63rem;
  }
  .text_28 {
    margin-right: 0.16rem;
    color: #333333;
    font-size: 0.88rem;
    font-family: SourceHanSansCN;
    line-height: 0.84rem;
  }
  .text_29 {
    margin-top: 0.094rem;
    color: #e65943;
    font-size: 0.88rem;
    font-family: SourceHanSansCN;
    font-weight: 500;
    line-height: 0.72rem;
  }
  .image_3 {
    flex-shrink: 0;
    width: 1.13rem;
    height: 1.13rem;
  }
  .text_30 {
    margin: 0.094rem 0 0.094rem 0.34rem;
    color: #6d79fe;
    font-size: 1rem;
    font-family: SourceHanSansCN;
    font-weight: 500;
    line-height: 0.94rem;
  }
  .text_31 {
    color: #ffffff;
    font-size: 1rem;
    font-family: SourceHanSansCN;
    font-weight: 500;
    line-height: 0.94rem;
  }
  .image {
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 0.59rem;
    height: 1.09rem;
  }
  .text {
    color: #ffffff;
    font-size: 1.06rem;
    font-family: SourceHanSansCN;
    font-weight: 500;
    line-height: 1rem;
  }
  .text_1 {
    color: #ffffff;
    font-size: 1.06rem;
    font-family: SourceHanSansCN;
    font-weight: 500;
    line-height: 1rem;
  }
  .text_2 {
    margin-top: 0.81rem;
    color: #ffffff;
    font-size: 0.88rem;
    font-family: SourceHanSansCN;
    line-height: 0.84rem;
  }
  .group_4 {
    padding-bottom: 0.34rem;
    flex-shrink: 0;
    width: 3.13rem;
    position: relative;
  }
  .group_5 {
    margin-left: 0.5rem;
    flex: 1 1 auto;
    align-self: center;
  }
  .group_8 {
    margin: 0.25rem 0;
  }
  .text-wrapper_2 {
    padding: 0.38rem 20rpx 0.41rem;
    background-color: #cccccc;
    border-radius: 0.72rem;

    height: 1.44rem;
  }
  .text-wrapper_22 {
    padding: 0.38rem 20rpx 0.41rem;
    background-color: #FEA14A;
    border-radius: 0.72rem;

    height: 1.44rem;
  }
  .group_10 {
    align-self: center;
  }
  .text-wrapper_3 {
    margin-right: 0.19rem;
    padding: 0.5rem 0;
    border-radius: 0.88rem;
    width: 4.88rem;
    height: 1.75rem;
    border: solid 0.031rem #999999;
  }
  .group_14 {
    margin-top: 0.72rem;
  }
  .group_15 {
    margin-top: 0.84rem;
  }
  .group_16 {
    margin-top: 0.88rem;
  }
  .group_17 {
    margin-top: 0.84rem;
  }
  .image_1 {
    width: 3.13rem;
    height: 3.13rem;
  }
  .text-wrapper {
    padding: 0.19rem 0;
    background-color: #536efd;
    background-image: linear-gradient(-45deg, #6d79fe 0%, #7d88ff 100%);
    border-radius: 0.47rem;
    width: 2.13rem;
    position: absolute;
    top: 2.5rem;
    left: 50%;
    transform: translateX(-50%);
  }
  .text-wrapper22 {
    padding: 0.19rem 0;
    background-color: #ccc;
    background-image: linear-gradient(-45deg, #ccc 0%, #ccc 100%);
    border-radius: 0.47rem;
    width: 2.13rem;
    position: absolute;
    top: 2.5rem;
    left: 50%;
    transform: translateX(-50%);
  }
  .group_7 {
    display:inline-flex;
    view{
        font-size: 20rpx;
        color: #666;
        background-color: #E0ECF8;
        padding: 5rpx 10rpx;
        margin-right: 15rpx;
    }
  }
  .image_2 {
    flex-shrink: 0;
    filter: drop-shadow(0px 0.094rem 0.56rem #df891e36);
    width: 0.94rem;
    height: 0.94rem;
  }
  .text_8 {
    margin: 0.13rem 0 0.094rem 0.34rem;
    color: #333333;
    font-size: 0.75rem;
    font-family: SourceHanSansCN;
    font-weight: 500;
    line-height: 0.72rem;
  }
  .text_9 {
    color: #ffffff;
    font-size: 0.69rem;
    font-family: SourceHanSansCN;
    line-height: 0.66rem;
  }
  .text_10 {
    color: #333333;
    font-size: 0.81rem;
    font-family: SourceHanSansCN;
    font-weight: 500;
    line-height: 0.78rem;
    letter-spacing: -0.021rem;
  }
  .text_11 {
    margin-top: 0.16rem;
    color: #e65943;
    font-size: 0.75rem;
    font-family: SourceHanSansCN;
    font-weight: 500;
    line-height: 0.59rem;
  }
  .text_12 {
    margin-bottom: 0.094rem;
    color: #e65943;
    font-size: 1rem;
    font-family: DINPro;
    font-weight: 700;
    line-height: 0.72rem;
  }
  .text_13 {
    color: #a8a8a8;
    font-size: 0.75rem;
    font-family: SourceHanSansCN;
    line-height: 0.69rem;
  }
  .text_14 {
    margin: 0.16rem 0 0.19rem;
    color: #333333;
    font-size: 0.88rem;
    font-family: SourceHanSansCN;
    line-height: 0.84rem;
  }
  .group_13 {
    margin-right: 0.094rem;
  }
  .text_17 {
    color: #333333;
    font-size: 0.88rem;
    font-family: SourceHanSansCN;
    line-height: 0.84rem;
  }
  .text_18 {
    margin-top: 0.16rem;
    color: #999999;
    font-size: 0.81rem;
    font-family: SourceHanSansCN;
    line-height: 0.63rem;
  }
  .text_19 {
    color: #333333;
    font-size: 0.88rem;
    font-family: SourceHanSansCN;
    line-height: 0.81rem;
  }
  .text_20 {
    margin-top: 0.094rem;
    color: #999999;
    font-size: 0.81rem;
    font-family: SourceHanSansCN;
    line-height: 0.75rem;
  }
  .text_21 {
    color: #333333;
    font-size: 0.88rem;
    font-family: SourceHanSansCN;
    line-height: 0.84rem;
  }
  .text_22 {
    margin-right: 0.094rem;
    color: #999999;
    font-size: 0.81rem;
    font-family: SourceHanSansCN;
    line-height: 0.75rem;
  }
  .text_23 {
    color: #333333;
    font-size: 0.88rem;
    font-family: SourceHanSansCN;
    line-height: 0.81rem;
  }
  .text_24 {
    margin-top: 0.094rem;
    color: #999999;
    font-size: 0.81rem;
    font-family: SourceHanSansCN;
    line-height: 0.75rem;
  }
  .text_3 {
    color: #fffffe;
    font-size: 0.63rem;
    font-family: SourceHanSansCN;
    line-height: 0.59rem;
  }
  .text_33 {
    color: #666;
    font-size: 0.63rem;
    font-family: SourceHanSansCN;
    line-height: 0.59rem;
  }
  .text_4 {
    margin-bottom: 0.094rem;
    color: #333333;
    font-size: 1rem;
    font-family: SourceHanSansCN;
    font-weight: 500;
    line-height: 0.94rem;
  }
  .text-wrapper_1 {
    margin-left: 0.38rem;
    padding: 0.13rem 0 0.22rem;
    background-color: #e6594300;
    border-radius: 0.5rem;
    height: 1.03rem;
    border: solid 0.031rem #e65943;
  }
  .text_6 {
    color: #666666;
    font-size: 0.69rem;
    font-family: SourceHanSansCN;
    line-height: 0.66rem;
  }
  .text_7 {
    color: #666666;
    font-size: 0.69rem;
    font-family: SourceHanSansCN;
    line-height: 0.66rem;
  }
  .text_15 {
    align-self: center;
    color: #999999;
    font-size: 0.81rem;
    font-family: SourceHanSansCN;
    line-height: 0.59rem;
  }
  .text-wrapper_4 {
    padding: 0.16rem 0 0.22rem;
    flex-shrink: 0;
    border-radius: 0.59rem;
    width: 2.59rem;
    height: 1.19rem;
    border: solid 0.031rem #999999;
  }
  .text_5 {
    margin: 0 0.34rem;
    color: #e65943;
    font-size: 0.63rem;
    font-family: SourceHanSansCN;
    line-height: 0.63rem;
  }
  .text_16 {
    color: #666666;
    font-size: 0.81rem;
    font-family: SourceHanSansCN;
    line-height: 0.75rem;
  }
  .texts{
      width: 85vw;
      margin: 30rpx auto;
      display: flex;
      .left{
          width:66rpx;
          line-height: 36rpx;
          background-image: linear-gradient(to right,#6CBEFF,#6CBEFF);
          color: #fff;
          font-size: 22rpx;
          font-weight: bold;
          text-align: center;
          margin-right: 25rpx;
      }
      .right{
          font-size: 28rpx;
          color:#363636;
          width: 60vw;
          font-weight: bold;
          text-overflow: ellipsis;
          overflow: hidden;
          white-space: nowrap;
      }
  }
</style>
